<template>
  <view class="page-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-title">设置</view>
    </view>
    
    <!-- 设置内容区域 -->
    <view class="settings-content">
      <!-- 账号设置 -->
      <view class="settings-section">
        <view class="section-title">账号设置</view>
        <view class="settings-list">
          <view class="settings-item" @click="navigateToSetting('account')">
            <view class="item-left">
              <uni-icons type="account" size="32" color="#909399"></uni-icons>
              <text>账号管理</text>
            </view>
            <uni-icons type="arrowright" size="28" color="#C0C4CC"></uni-icons>
          </view>
          
          <view class="settings-item" @click="navigateToSetting('security')">
            <view class="item-left">
              <uni-icons type="lock" size="32" color="#909399"></uni-icons>
              <text>账号安全</text>
            </view>
            <uni-icons type="arrowright" size="28" color="#C0C4CC"></uni-icons>
          </view>
          
          <view class="settings-item" @click="switchAccount">
            <view class="item-left">
              <uni-icons type="swap" size="32" color="#909399"></uni-icons>
              <text>切换账号</text>
            </view>
            <uni-icons type="arrowright" size="28" color="#C0C4CC"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 功能设置 -->
      <view class="settings-section">
        <view class="section-title">功能设置</view>
        <view class="settings-list">
          <view class="settings-item" @click="navigateToSetting('notifications')">
            <view class="item-left">
              <uni-icons type="bell" size="32" color="#909399"></uni-icons>
              <text>消息通知</text>
            </view>
            <uni-icons type="arrowright" size="28" color="#C0C4CC"></uni-icons>
          </view>
          
          <view class="settings-item" @click="navigateToSetting('privacy')">
            <view class="item-left">
              <uni-icons type="shield" size="32" color="#909399"></uni-icons>
              <text>隐私设置</text>
            </view>
            <uni-icons type="arrowright" size="28" color="#C0C4CC"></uni-icons>
          </view>
          
          <view class="settings-item" @click="navigateToSetting('feedback')">
            <view class="item-left">
              <uni-icons type="questionnaire" size="32" color="#909399"></uni-icons>
              <text>问题反馈</text>
            </view>
            <uni-icons type="arrowright" size="28" color="#C0C4CC"></uni-icons>
          </view>
          
          <view class="settings-item" @click="navigateToSetting('about')">
            <view class="item-left">
              <uni-icons type="info" size="32" color="#909399"></uni-icons>
              <text>关于我们</text>
            </view>
            <uni-icons type="arrowright" size="28" color="#C0C4CC"></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 退出登录 -->
      <view class="settings-section">
        <view class="settings-list">
          <view class="settings-item danger" @click="showLogoutConfirm">
            <view class="item-left">
              <uni-icons type="exit" size="32" color="#E64340"></uni-icons>
              <text>退出登录</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 退出登录确认弹窗 -->
    <view v-if="showLogoutPopup" class="popup-mask" @click.stop="hideLogoutPopup">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">退出登录</text>
        </view>
        <view class="popup-body">
          <text class="popup-message">确定要退出当前账号吗？退出后将无法使用需要登录的功能</text>
        </view>
        <view class="popup-footer">
          <view class="popup-btn cancel" @click="hideLogoutPopup">取消</view>
          <view class="popup-btn confirm" @click="handleLogout">确认退出</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

// 状态管理
const showLogoutPopup = ref(false);

// 页面加载时的初始化操作
onMounted(() => {
  // 可以在这里添加页面加载时的逻辑
});

// 页面跳转
const navigateToSetting = (path: string) => {
  let url = '';
  switch(path) {
    case 'account':
      url = '/pages/settings/account';
      break;
    case 'security':
      url = '/pages/settings/security';
      break;
    case 'notifications':
      url = '/pages/settings/notifications';
      break;
    case 'privacy':
      url = '/pages/settings/privacy';
      break;
    case 'feedback':
      url = '/common/Question';
      break;
    case 'about':
      url = '/common/AboutUs';
      break;
    default:
      url = '/pages/index/index';
  }
  uni.navigateTo({ url });
};

// 切换账号
const switchAccount = () => {
  uni.showModal({
    title: '切换账号',
    content: '确定要切换账号吗？当前账号将被退出',
    success: (res) => {
      if (res.confirm) {
        // 执行切换账号逻辑
        uni.removeStorageSync('userId');
        uni.$emit('logout');
        uni.showToast({
          title: '已切换账号',
          icon: 'success'
        });
        setTimeout(() => {
          uni.navigateTo({ url: '/common/login' });
        }, 1500);
      }
    }
  });
};

// 显示退出登录确认弹窗
const showLogoutConfirm = () => {
  showLogoutPopup.value = true;
};

// 隐藏退出登录确认弹窗
const hideLogoutPopup = () => {
  showLogoutPopup.value = false;
};

// 处理退出登录
const handleLogout = () => {
  hideLogoutPopup();
  // 清除本地存储的用户信息
  uni.removeStorageSync('userId');
  // 触发全局退出登录事件
  uni.$emit('logout');
  uni.showToast({
    title: '已退出登录',
    icon: 'success'
  });
  // 退出后跳转到登录页
  setTimeout(() => {
    uni.switchTab({ url: '/pages/home/index' });
  }, 1500);
};
</script>

<style scoped>
/* 全局样式 */
page {
  height: 100%;
  background-color: #F5F7FA;
  font-size: 28rpx;
  color: #333;
}

.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 页面头部 */
.page-header {
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  position: relative;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #303133;
}

/* 设置内容区域 */
.settings-content {
  flex: 1;
  padding-bottom: 40rpx;
  box-sizing: border-box;
  background-color: #F5F7FA;
}

.settings-section {
  margin-bottom: 30rpx;
  background-color: white;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  padding: 20rpx 40rpx;
  font-size: 28rpx;
  color: #909399;
  background-color: #F7F8FA;
}

.settings-list {
  display: flex;
  flex-direction: column;
}

.settings-item {
  display: flex;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #F5F7FA;
}

.settings-item:last-child {
  border-bottom: none;
}

.item-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.item-left uni-icons {
  margin-right: 20rpx;
}

.settings-item text {
  font-size: 32rpx;
  color: #303133;
}

.settings-item uni-icons:last-child {
  color: #C0C4CC;
}

/* 危险操作样式 */
.settings-item.danger {
  color: #E64340;
}

.settings-item.danger uni-icons:first-child {
  color: #E64340;
}

.settings-item.danger text {
  color: #E64340;
}

/* 退出登录弹窗 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.popup-content {
  background-color: white;
  border-radius: 24rpx;
  width: 80%;
  max-width: 600rpx;
  overflow: hidden;
}

.popup-header {
  padding: 40rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1rpx solid #F5F7FA;
}

.popup-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #303133;
}

.popup-body {
  padding: 40rpx;
  text-align: center;
}

.popup-message {
  font-size: 28rpx;
  color: #606266;
  line-height: 1.6;
}

.popup-footer {
  display: flex;
  border-top: 1rpx solid #F5F7FA;
}

.popup-btn {
  flex: 1;
  padding: 30rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

.popup-btn.cancel {
  color: #606266;
}

.popup-btn.confirm {
  color: #E64340;
  font-weight: 500;
}
</style>